<template>
    <view class="container paddingBottomBar">
        <header-bar :config="config"></header-bar>
        <view class="order-header"></view>
        <view class="order-main">
			<selecttime-date :dayname="dayname" :num="0" :startDate="startDate" :endDate='endDate' @selDate="selDate"></selecttime-date>
<!-- 			<view class="data-select">
				<view @click="dayselect">{{dayname}}<uni-icons type="arrowdown" size="20" customIcons="icon-black"></uni-icons></view>
				<view @click="datatimeselect">{{datatime}}<uni-icons type="arrowdown" size="20" customIcons="icon-black"></uni-icons></view>
			</view> -->
			<view class="order-data">
				<view class="order-d-title">客户总数</view>
				<view  class="order-d-subtitle">
					<view class="stong">{{info.UserTotal}}</view>
				</view>
				<view class="info-data">
					<view class="info-data-item info-up">
						<view>下单客户（占比）</view>
						<view class="strong">{{info.OrderUserTotal}}({{info.OrderUserRate}}%)</view>
						<view class="ratio">{{info.CompareName}}<image :src="info.OrderUserCompare>0?'/static/icon/up.png':'/static/icon/down.png'" alt=""><text>{{info.OrderUserCompare}}</text></view>
					</view>
					<view class="info-data-item info-down">
						<view>新增客户（占比）</view>
						<view class="strong">{{info.AddUserTotal}}({{info.NewUserRate}}%)</view>
						<view class="ratio">{{info.CompareName}}<image :src="info.AddUserCompare>0?'/static/icon/up.png':'/static/icon/down.png'" alt=""><text>{{info.AddUserCompare}}</text></view>
					</view>
				</view>
			</view>
			<view class="echars-data">
				<view class="echars-title">
					<view class="font">客户增长趋势</view>
					<selecttime-date :dayname="dayname1" :num="1" :startDate="startDate1" :endDate='endDate1' @selDate="selDate"></selecttime-date>
				</view>
				<!-- <view class="info-tab mt-40">
					<view>订单金额</view>
					<view class="active">订单笔数</view>
					<view>客户数</view>
				</view> -->
				<view class="charts-box">
					<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
				</view>
			</view>
			<view class="echars-data">
				<view class="echars-title">
					<view class="font">等级分析</view>
				</view>
				<view class="charts-box mt-40">
					<qiun-data-charts
					  type="pie"
					  :opts="opts1"
					  :chartData="chartData1"
					/>
				</view>
			</view>
			<view class="echars-data">
				<view class="echars-title">
					<view class="font">客户分析</view>
					<!-- <selecttime-date :dayname="dayname2" :num="2" :startDate="startDate2" :endDate='endDate2' @selDate="selDate"></selecttime-date> -->
				</view>
				<view class="info-tab mt-40">
					<view :class="analystNum==1?'active':''" @click="analyst(1)">标签</view>
					<view :class="analystNum==2?'active':''" @click="analyst(2)">等级</view>
					<view :class="analystNum==3?'active':''" @click="analyst(3)">来源</view>
				</view>
				<view class="charts-box">
					 <qiun-data-charts 
					      type="column"
					      :opts="opts2"
					      :chartData="chartData2"
					    />
				</view>
			</view>
			<view class="echars-data">
				<view class="echars-title">
					<view class="font">顾客消费次数分析</view>
				</view>
				<view class="charts-box mt-40">
					 <qiun-data-charts 
					      type="column"
					      :opts="opts3"
					      :chartData="chartData3"
					    />
				</view>
			</view>
			<view class="echars-data">
				<view class="echars-title">
					<view class="font">客单分析</view>
					<selecttime-date :dayname="dayname3" :num="3" :startDate="startDate3" :endDate='endDate3' @selDate="selDate"></selecttime-date>
				</view>
				<view class="kedanjia">
					<view class="ke-left">
						<view>金额</view>
						<view class="strong">{{guestList.OrderPrice}}</view>
					</view>
					<view class="ke-right">
						<view>
							<view><text class="yuan"></text>客单价单价</view>
							<view class="strong">{{guestList.OrderUserPrice}}</view>
						</view>
						<view>
							<view><text class="yuan yuan1"></text>订单笔数</view>
							<view class="strong">{{guestList.UserOrderAvg}}</view>
						</view>
					</view>
				</view>
			</view>
	
        </view>
    </view>
</template>

<script>
import { mapMutations } from "vuex"
import { GetUserAddInfo, GetUserAddTrend,GetUserGradeAnalysisInfo,GetUserAnalysisInfo,GetOrderGroupByUser,GetOrderUserPriceInfo } from "@/service/api/user.js"
import storage from "@/uni-sub-base/utils/storage.js"
import utils from "@/utils/utils.js"
import selecttimeDate from "@/components/customer/selecttime-date.vue"
export default {
    components: {
		selecttimeDate
    },
    data() {
        return {
            config: {
                title: "客户分析",
                centerSlot: true,
                rightSlot: false,
                color: ["#ffffff"],
            },
			dayname:'本周',
			startDate:utils.thisWeek().startDate,
			endDate:utils.thisWeek().endDate,
			dayname1:'本周',
			startDate1:utils.thisWeek().startDate,
			endDate1:utils.thisWeek().endDate,
			dayname2:'本周',
			startDate2:utils.thisWeek().startDate,
			endDate2:utils.thisWeek().endDate,
			dayname3:'本周',
			startDate3:utils.thisWeek().startDate,
			endDate3:utils.thisWeek().endDate,
			dayname4:'本周',
			startDate4:utils.thisWeek().startDate,
			endDate4:utils.thisWeek().endDate,
			dayname5:'本周',
			startDate5:utils.thisWeek().startDate,
			endDate5:utils.thisWeek().endDate,
			dataList:[
			    {
			        title: "今日",
			    },
			    {
			        title: "本周",
			    },
			    {
			        title: "本月",
			    },
			    {
			        title: "本年",
			    },
				{
				    title: "自定义",
				},
			],
			chartData: {},
			opts: {
				color: ["#F1270C"],
				padding: [15, 15, 0, 15],
				enableScroll: false,
				legend: {
					show: false,
				},
				xAxis: {
					disableGrid: true
				},
				yAxis: {
					gridType: "dash",
					dashLength: 2
				},
				extra: {
					area: {
						type: "straight",
						opacity: 0.2,
						addLine: true,
						width: 2,
						gradient: false,
						activeType: "hollow"
					}
				}
			},
			chartData1: {},
			opts1: {
				color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				padding: [5,5,5,5],
				enableScroll: false,
				extra: {
				  pie: {
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 15,
					border: true,
					borderWidth: 3,
					borderColor: "#FFFFFF"
				  }
				}
			  },
			analystNum:1,
			chartData2: {},
			opts2: {
			  color: ["#F1270C","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
			  padding: [15,15,0,5],
			  enableScroll: false,
			  legend: {
				  show: false,
			  },
			  xAxis: {
			    disableGrid: true
			  },
			  yAxis: {
			    data: [
			      {
			        min: 0
			      }
			    ]
			  },
			  extra: {
			    column: {
			      type: "group",
			      width: 20,
			      activeBgColor: "#000000",
			      activeBgOpacity: 0.08
			    }
			  }
			},
			chartData3: {},
			opts3: {
			  color: ["#F1270C","#43A5FF","#3FCDCD","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
			  padding: [15,15,0,5],
			  enableScroll: false,
			  legend: {
				  show: true,
			  },
			  xAxis: {
			    disableGrid: true
			  },
			  yAxis: {
			    data: [
			      {
			        min: 0
			      }
			    ]
			  },
			  extra: {
			    column: {
			      type: "group",
			      width: 15,
			      activeBgColor: "#000000",
			      activeBgOpacity: 0.08
			    }
			  }
			},
			guestList:{},
			info:{}
			
        }
    },
    created() {
        let mainColor = this.easyGetColor("main")
        this.config.backgroundColor = [1, mainColor]
    },
    onLoad(e) {
       
    },

    mounted() {
		this.getInfo()
		this.getServerData()//GetUserAddTrend 客户增长趋势
		this.getServerData1()
		this.getServerData2()
		this.getServerData3()
		this.PriceInfo()
	},
    onShow() {
       
    },
    methods: {
		getInfo(){
			let params = {
				DateBgn:this.startDate,
				DateEnd:this.endDate
			}
			GetUserAddInfo(params).then((res) => {
			    if (res.State == 1) {
			       this.info = res.Data;
			    }
			})
		},
		PriceInfo(){
			let params = {
				DateBgn:this.startDate3,
				DateEnd:this.endDate3
			}
			GetOrderUserPriceInfo(params).then((res) => {
			    if (res.State == 1) {
			       this.guestList = res.Data
			    }
			})
		},
		analyst(num){
			this.analystNum = num;
			this.getServerData2()
		},
		getServerData() {
			this.chartData = {}
			//模拟从服务器获取数据时的延时
			let params = {
				DateBgn:this.startDate1,
				DateEnd:this.endDate1
			}
			GetUserAddTrend(params).then((data) => {
			    if (data.State == 1) {
			       let res = {
			       	categories: data.Data.xAxisRegList,
			       	series: [{
			       			name: "客户增长趋势",
			       			data: data.Data.RegList
			       		},
			       	]
			       };
			       this.chartData = JSON.parse(JSON.stringify(res));
			    }
			})
		},
		getServerData1() {
		  //模拟从服务器获取数据时的延时
		  let params = {
		  	DateBgn:this.startDate2,
		  	DateEnd:this.endDate2
		  }
		  GetUserGradeAnalysisInfo(params).then((data) => {
		      if (data.State == 1) {
		         let res = {
		             series: [
		               {
		                 // data: [{"name":"一班","value":50},{"name":"二班","value":30},{"name":"三班","value":20},{"name":"四班","value":18,},{"name":"五班","value":8}]
		                 data: data.Data
		               }
		             ]
		           };
		         this.chartData1 = JSON.parse(JSON.stringify(res));
		      }
		  })
		},
		getServerData2() {
			this.chartData2 = {}
		  //模拟从服务器获取数据时的延时
		  GetUserAnalysisInfo({}).then((data) => {
		      if (data.State == 1) {
				  if(this.analystNum==1){
					let res = {
					    categories: data.Data.TagNameList,
					    series: [
					      {
					        name: "数值",
					        data: data.Data.TagTotalList
					      }
					    ]
					  };
					this.chartData2 = JSON.parse(JSON.stringify(res));  
				  }else if(this.analystNum==2){
					  let res = {
					      categories: data.Data.GradeNameList,
					      series: [
					        {
					          name: "数值",
					          data: data.Data.GradeTotalList
					        }
					      ]
					    };
					  this.chartData2 = JSON.parse(JSON.stringify(res));  
				  }else if(this.analystNum==3){
					  let res = {
					      categories:data.Data.JoinSourceNameList,
					      series: [
					        {
					          name: "数值",
					          data: data.Data.JoinSourceTotalList
					        }
					      ]
					    };
					  this.chartData2 = JSON.parse(JSON.stringify(res)); 
				  }
		      }
		  })
		},
		  getServerData3() {
			//模拟从服务器获取数据时的延时
			let params = {
				// startDate:this.startDate4,
				// endDate:this.endDate4
			}
			GetOrderGroupByUser().then((data) => {
			    if (data.State == 1) {
			       let res = {
					  categories: data.Data.RateName,
					  series: [
						{
						  name: "顾客数占比",
						  data: data.Data.TotalUserRate
						},
						{
						  name: "交易数占比",
						  data: data.Data.OrderCountRate
						},
						{
						  name: "交易金额占比",
						  data: data.Data.SaleAmounRate
						}
					  ]
					};
			       this.chartData3 = JSON.parse(JSON.stringify(res));
			    }
			})
		  },
		  selDate(num,dayname,startDate,endDate){
			  console.log(num,dayname,startDate,endDate)
			  if(num==0){
				  this.dayname = dayname
				  this.startDate = startDate
				  this.endDate = endDate
				  this.getInfo()
			  }else if(num==1){
				  this.dayname1 = dayname
				  this.startDate1 = startDate
				  this.endDate1 = endDate
				  this.getServerData()
			  }else if(num==2){
				  this.dayname2 = dayname
				  this.startDate2 = startDate
				  this.endDate2 = endDate
				  this.getServerData2()
			  }else if(num==3){
				  this.dayname3 = dayname
				  this.startDate3 = startDate
				  this.endDate3 = endDate
				  this.PriceInfo()
			  }
			  
		  },
    },
}
</script>

<style lang="scss">

.order-header {
    height: 186rpx;
    background: $app-color-main;
	border-radius: 0px 0px 40rpx 40rpx;
}
.order-main {
	margin-top: -186rpx;
	padding: 32rpx $app-page-padding $app-page-padding;
}
.data-select{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 52rpx;
	&>view{
		font-size: 28rpx;
		padding:0 24rpx;
		background: rgba(255,255,255,0.18);
		border-radius: 26rpx;
		color: #fff;
		height: 100%;
		line-height: 52rpx;
		margin-right: 12rpx;
	}
	&>view:last-child{
		margin-right: 0rpx;
	}
	.icon-black{
		padding-left: 4rpx;
	}
}
.data-select-edit{
	height: 46rpx;
	&>view{
		font-size: 24rpx;
		border-radius: 26rpx;
		border: 1rpx solid #666666;
		height: 100%;
		line-height: 46rpx;
		color:#333;
		margin-right: 12rpx;
	}
}
.order-data{
	padding: 24rpx;
	background: #fff;
	border-radius: 24rpx;
	margin-top: 26rpx;
	.order-d-title{
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		padding-left: 8rpx;
	}
	.order-d-subtitle{
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		padding: 24rpx 0 32rpx 0;
		.stong{
			font-size: 50rpx;
			font-weight: bold;
		}
		image{
			width: 24rpx;
			height: 24rpx;
		}
	}
}
.info-data{
	display: flex;
	justify-content: space-between;
}
.info-data-item{
	padding: 24rpx 30rpx;
	color:#666;
	font-size: 24rpx;
	width: 256rpx;
	.strong{
		font-size: 36rpx;
		font-weight: bold;
		color:#333;
		padding: 12rpx 0;
	}
	.ratio{
		image{
			width: 24rpx;
			height: 24rpx;
			vertical-align: -4rpx;
		}
		text{
			font-size: 28rpx;
			color:#333;
			font-weight: bold;
		}
	}
}

.info-up{
	background: #FFF5F4;
}
.info-down{
	background: #EFFCF7;
}
.iconfont{
	font-weight: bold;
	font-size: 30rpx;
}
.echars-data{
	background: #FFFFFF;
	border-radius: 24rpx;
	padding: 24rpx;
	margin-top: 18rpx;
	.echars-title{
		display: flex;
		justify-content: space-between;
		.font{
			font-weight: 700;
			font-size: 28rpx;
			color: #333333
		}
	}
}
.info-tab{
	margin: 0 auto;
	width: 360rpx;
	height: 48rpx;
	background: #F5F6F7;
	border-radius: 4rpx;
	display: flex;
	justify-content: flex-start;
	&>view{
		width: 33.33%;
		font-size: 24rpx;
		color:#666;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.active{
		width: 120rpx;
		height: 40rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 8rpx 0px rgba(51,51,51,0.09);
		border-radius: 4px;
		color: #333;
		font-weight: bold;
		margin-top: 4rpx;
	}
}
.mt-40{
	margin-top: 40rpx;
}
.charts-box {
	width: 100%;
	height: 440rpx;
	background: #fff;
}
.kedanjia{
	margin-top: 70rpx;
	display:flex;
	align-items: center;
	&>view{
		width:50%;
	}
	.ke-left{
		text-align: center;
		font-size: 28rpx;
		color: #333333;
		.strong{
			font-weight: bold;
			font-size: 48rpx;
			color: #F1270C;
		}
	}
	.ke-right{
		line-height: 1.8;
		padding-left: 30rpx;
		font-size: 24rpx;
		color: #333333;
		.yuan{
			display: inline-block;
			width: 12rpx;
			height: 12rpx;
			background: #00B42A;
			border-radius: 4rpx;
			margin-right: 12rpx;
		}
		.yuan1{
			background: #FF8F37;
		}
		.strong{
			font-weight: bold;
			font-size: 34rpx;
			color: #333333;
			padding-left: 24rpx;
		}
	}

}
.operation-tab{
	display: flex;
	justify-content: space-around;
	&>view{
		width:30%;
		background: #FFF5F4;
		height: 120rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: 24rpx;
		color:#666;
		text-align: center;
		.strong{
			font-weight: bold;
			font-size: 40rpx;
			color: #333333;
		}
	}
}
 .pay-way-item{
	display: block!important;
	text-align: center;
	text{
		font-size:30rpx
	}
}
.btn{
	font-size:28rpx
}
</style>
